<template>
    <div class="wh-100" style="background-color: #e9edf6">
        <!--企业信息-->
        <div class="w-100 d-flex-between-center px-32" style="height: 145px; background-color: #067ff9">
            <div style="width: 380px" class="h-100 d-flex-center">
                <img src="" class="" style="width: 100px; height: 100px" />
                <div class="ml-20">
                    <div style="font-weight: bold; color: white">浙江国邦药业有限公司</div>
                    <div class="mt-12 d-flex-between w-85">
                        <Button type="primary">企业主页</Button>
                        <Button type="primary">编辑信息</Button>
                    </div>
                    <div class="mt-12" style="font-size: 14px; color: white">上次登录时间：2023-10-17 10:50</div>
                </div>
            </div>
            <div style="width: 100px" class="h-100 d-flex-center">
                <img src="" style="width: 100px; height: 100px" />
            </div>
        </div>
        <!--消息-->
        <div class="w-100 px-12 d-flex-between-center mt-12" style="height: 40px; border: 1px solid #e8edf4; background-color: #fff; border-radius: 6px">
            <div style="color: #ffa946" class="d-flex align-items-center">
                <Icon type="ios-notifications" />
                <div style="font-size: 14px" class="ml-16">2023年全国中小企业网上百日招聘高校毕业生活动</div>
            </div>
            <div style="font-size: 14px">更多</div>
        </div>
        <!--跳转-->
        <div class="w-100 d-flex-between-center mt-12" style="height: 60px">
            <div v-for="item in 5" :key="item" class="skip-jump h-100 d-flex align-items-center px-20 flex-1" style="border: 1px solid #e8edf4">
                <div class="d-flex-center" style="width: 30px; height: 30px; background-color: rgba(243, 248, 255, 0.5); border-radius: 50%">
                    <div style="width: 10px; height: 10px; background-color: rgba(0, 111, 240); border-radius: 50%"></div>
                </div>
                <div class="ml-16" style="color: #006ff0; font-size: 20px; font-weight: bold">发布职位</div>
            </div>
        </div>
        <!--招聘管理&活动管理-->
        <div class="w-100 mt-12 d-flex-between-center" style="height: 150px">
            <div style="background-color: #fff; border-radius: 6px" class="mr-12 h-100 flex-1">
                <div class="w-100 pl-12" style="font-size: 16px; font-weight: bold; border-bottom: 1px solid #f5f7fa; height: 30px">招聘管理</div>
                <div class="w-100 d-flex-around-center" style="height: 120px">
                    <div class="text-center" v-for="item in 4" :key="item">
                        <div style="font-size: 26px; color: #006ff0">10</div>
                        <div class="mt-12" style="font-size: 16px">待处理简历</div>
                    </div>
                </div>
            </div>
            <div style="background-color: #fff; border-radius: 6px" class="h-100 w-30">
                <div class="w-100 pl-12" style="font-size: 16px; font-weight: bold; border-bottom: 1px solid #f5f7fa; height: 30px">活动管理</div>
                <div class="w-100 d-flex-around-center" style="height: 120px">
                    <div class="text-center" v-for="item in 2" :key="item">
                        <div style="font-size: 26px; color: #006ff0">10</div>
                        <div class="mt-12" style="font-size: 16px">待处理简历</div>
                    </div>
                </div>
            </div>
        </div>
        <!--面试安排-->
        <div class="w-100 mt-12" style="height: 295px; background-color: #fff; border-radius: 6px">
            <div style="height: 40px; border-bottom: 1px solid #ecf0f6" class="d-flex-between-center px-12">
                <div class="w-100 d-flex align-items-center">
                    <span style="color: #4d4d4d; font-weight: bold; font-size: 16px">面试安排</span>
                    <span style="font-size: 14px; color: #989898; margin-left: 5px">学生对面试邀请函反馈后可在候选人管理→已发送面试邀请页面查看</span>
                </div>
                <div class="d-flex-center h-100" style="font-size: 14px; width: 200px">
                    <div :class="dateType === 1 ? 'date-bg' : ''" @click="timeSwitching(1)" class="flex-1 text-center" style="border: 1px solid #e8edf4; border-radius: 40px 0 0 40px; cursor: pointer">
                        今天
                    </div>
                    <div :class="dateType === 2 ? 'date-bg' : ''" @click="timeSwitching(2)" class="flex-1 text-center" style="border: 1px solid #e8edf4; cursor: pointer">明天</div>
                    <div :class="dateType === 3 ? 'date-bg' : ''" @click="timeSwitching(3)" class="flex-1 text-center" style="border: 1px solid #e8edf4; border-radius: 0 40px 40px 0; cursor: pointer">
                        以后
                    </div>
                </div>
            </div>
            <div class="w-100" style="height: 255px">
                <Table :columns="interviewTableHeader" :data="interviewTableData" height="255">
                    <template slot-scope="{ row }" slot="操作">
                        <div style="color: #62aff2; cursor: pointer">取消面试</div>
                    </template>
                </Table>
            </div>
        </div>
        <!--高校入驻-->
        <div class="w-100 mt-12" style="height: 295px; background-color: #fff; border-radius: 6px">
            <div style="height: 40px; border-bottom: 1px solid #ebeff5" class="d-flex-between-center px-12">
                <div style="font-size: 16px; font-weight: bold">高校入驻</div>
                <div class="d-flex align-items-center">
                    <Select placeholder="请选择城市" v-model="model1" style="width: 130px; margin-right: 12px">
                        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                    <Select placeholder="请选择区县" v-model="model1" style="width: 130px; margin-right: 12px">
                        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                    <Input v-model="value" placeholder="输入学校名称" style="width: 150px; height: 35px" />
                    <Button type="primary" style="height: 30px">搜索</Button>
                </div>
            </div>
            <div class="w-100 d-flex flex-column align-items-center mt-12" style="height: 255px; font-size: 14px; overflow: auto">
                <div v-for="item in 100" :key="item" class="w-95 d-flex align-items-center" style="height: 50px; border-bottom: 1px solid #d4e5ff">
                    <img src="" style="width: 50px; height: 50px" class="debugger-bor mr-28" />
                    <div class="flex-1">河南大学</div>
                    <div class="flex-1">河南大学就业网</div>
                    <div class="flex-1">郑州 金水区</div>
                    <div class="flex-1">审核通过</div>
                    <Button type="primary" style="height: 30px">一键登录</Button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
// region TODO 面试安排
const dateType = 1;
const interviewTableHeader = [
    {
        title: '候选人姓名',
        key: ''
    },
    {
        title: '学历',
        key: ''
    },
    {
        title: '性别',
        key: ''
    },
    {
        title: '年龄',
        key: ''
    },
    {
        title: '应聘职位',
        key: ''
    },
    {
        title: '薪资（元/月）',
        key: ''
    },
    {
        title: '面试轮次',
        key: ''
    },
    {
        title: '面试时间',
        key: ''
    },
    {
        title: '面试方式',
        key: ''
    },
    {
        title: '操作',
        slot: '操作',
        width: 150
    }
];
const interviewTableData = [];
// endregion

// region TODO 高校入驻
const cityList = [
    {
        value: 1,
        label: '郑州'
    }
];

// endregion
export default {
    data() {
        return {
            cityList,
            dateType,
            interviewTableHeader,
            interviewTableData
        };
    },
    methods: {
        // region TODO 面试安排的时间切换
        timeSwitching: function (type) {
            this.dateType = type;
        }
        // endregion
    }
};
</script>
<style scoped>
.ivu-btn {
    margin-left: 0;
}

.skip-jump {
    background-color: #fff;
    margin-right: 12px;
    border-radius: 4px;
    background-image: url('../../../assets/logo-min.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.skip-jump:last-child {
    margin-right: 0;
}

.date-bg {
    background-color: #0078f9;
    color: #fff;
}

/deep/ .ivu-table th {
    background-color: #cde2fd !important;
}
/deep/.ivu-input {
    height: 30px;
}
</style>
